<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <!-- 头部的布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <svg-icon icon-class="user" /><span
              >江苏传智播客教育科技股份有限公司</span
            >
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <el-dropdown-menu slot="dropdown">
                    <!-- 添加一级部门只需要将pid传为空即可 -->
                    <el-dropdown-item @click.native="hAdd('')"
                      >添加子部门</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- end头部的布局 -->
        <!--
          主体布局
            data:指定要渲染的数据
            props:指定数据中的对象的某个属性在树形组件显示以及子级节点的属性名
            @node-click:点击时间,点击每一个节点,获取节点对象数据
         -->
        <el-tree
          :data="list"
          :props="{ chidren: 'children', label: 'manager' }"
        >
          <!--
            主体内容(使用了插槽) 使用插槽在el-tree自定义内容
            在element-ui中如果在插槽中是'-'那么就是默认插槽#default
          -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <svg-icon icon-class="user" />
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hAdd(data.id)"
                          >添加子部门</el-dropdown-item
                        >
                        <el-dropdown-item @click.native="hEdit(data.id)"
                          >编辑子部门</el-dropdown-item
                        >
                        <!-- 这里的data.chidren是判断是该部门是否为一级部门,如果是一级部门就就没有删除子部门 -->
                        <el-dropdown-item
                          v-if="data.children && data.children.length === 0"
                          @click.native="Del(data.id)"
                          >删除子部门</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>

      <!-- dialog组件(窗口的添加或编辑) 
        1.在遮罩上点击可以通过`:close-on-click-modal='false'`来关闭这个功能
        2.按下esc键。可以通过`:close-on-press-escape='false'`来关闭这个功能
        3.点击右上角的X按钮。可以通过`:show-close="false"`来隐藏这个按钮
        4.自己定义的取消，关闭。核心是修改visiable=false
      -->
      <el-dialog
        @close="hClose"
        :title="isEdit ? '编辑子部门' : '新增子部门'"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <!-- 新增或编辑的子组件 -->
        <!-- v-if="showDialog"是创建子组件和销毁子组件 解决数据不更新 -->
        <!-- ref="myDmp" 这个是使用this.$nextTick的方式来解决数据不更新 -->
        <!-- @close="showDialog == false" 关闭弹层 -->
        <addOrEdit
          ref="myDept"
          v-if="showDialog"
          :currentId="currentId"
          @success="hSuccess"
          :isEdit="isEdit"
          @close="showDialog = false"
          :origin-list="originList"
        ></addOrEdit>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// 查询企业的部门列表接口,删除子部门
import { getDepartment, DelEmployeesSimple } from '@/api/department(企业接口).js'
// 导入平面数据转树形树形数据的功能函数
import { transListToTerrList } from '@/utils/index(自定义功能函数).js'
// 导入子组件
import addOrEdit from '@/views/departments(组织架构)/deptDialog(新增或编辑部门).vue'
export default {
  // 注册组件
  components: {
    addOrEdit
  },
  //1.渲染数据
  data () {
    return {
      // 1.1.企业的部门列表
      list: [],
      // 1.2.控制弹层的显示隐藏
      showDialog: false,
      // 1.3 当前元素的id
      currentId: '',
      // 1.4 使用变量来控制用户点击的是新增还是编辑 true为编辑 false为编辑
      isEdit: true,
      // 1.5 特殊处理过的数据
      originList: []
    }
  },
  // 2.页面进来立即执行
  created () {
    // 2.1调用获取组织部门的函数
    this.loadDepartment()
  },
  // 3.事件
  methods: {
    // 3.1.获取组织部门里面的数据
    async loadDepartment () {
      let res = await getDepartment()
      // 剔除 pid为-1的 数据 然后在平面数据转树形数据
      this.list = transListToTerrList(res.data.depts.filter(item => item.pid != -1))
      // 将name code id pid这四个数据传给子组件
      this.originList = res.data.depts.map(item => {
        const { name, code, id, pid } = item
        return { name, code, id, pid }
      })
    },
    // 3.2.新增
    hAdd (id) {
      // (1) 控制弹层
      this.showDialog = true
      // (2) 获取当前点击元素的id
      this.currentId = id
      // (3) 当前点击的状态 true为编辑 false为新增
      this.isEdit = false
    },
    //3.3子传父过来的自定义事件
    hSuccess () {
      // (1) 关闭弹层
      this.showDialog = false
      // (2) 渲染数据
      this.loadDepartment()
    },
    // 3.4 编辑
    hEdit (id) {
      // (1)获取当前点击元素的id
      this.currentId = id
      // (2)打开弹层
      this.showDialog = true
      // (3)当前点击的状态 true为编辑 false为新增
      this.isEdit = true
      /* 
        // (4)这个是解决数据不更新问题
        // 其中为什么要使用$nextTick() 那是因为 props传到子组件的数据是异步的 所以这个id获取的会慢一步
        // this.$nextTick(() => {
        //   this.$refs.myDmp.loadDepartmentDetail()
        // }) 
      */
    },
    // 3.5 删除子部门
    Del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await DelEmployeesSimple(id)
        // 重新加载数据
        this.loadDepartment()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭弹层清空表单数据
    hClose () {
      this.$refs.myDept.resetForm()
    }
  }
}
</script>
